﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RecordIntake.aspx.cs" Inherits="AntiObesity.Services.RecordIntake" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Record an Intake</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<script src="Contents/jquery.js" type="text/javascript"></script>
<script src="Contents/jquery-ui.js" type="text/javascript"></script>
<script src="Contents/jquery-autocomplete.js" type="text/javascript"></script>
<script src="Contents/jquery-validate.js" type="text/javascript"></script>
<script src="Contents/jquery.en-GB.js" type="text/javascript"></script>
<script src="Contents/jquery.fancybox-1.3.0.pack.js" type="text/javascript"></script>
<link href="Contents/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<link href="Contents/css/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="Contents/jquery.fancybox-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <span class="record-intake">
        <h1>
            Record an Intake</h1>
        <span class="form">
            <span class="items-body">
                <span class="item">
                    <span class="label">
                        <label for="txtFoodName">Food name:</label>
                    </span>
                    <span class="input">
                        <asp:TextBox ID="txtFoodName" runat="server" Width="400"></asp:TextBox>
                    </span>
                </span>
                <span class="item">
                    <span class="label">
                        <label for="txtFoodName">Amount:</label>
                    </span>
                    <span class="input">
                        <asp:TextBox ID="txtAmount" runat="server" Width="100"></asp:TextBox><span class="info">(grams)</span>
                    </span>
                </span>
                <span class="item">
                    <span class="label">
                        <label for="txtDate">Date:</label>
                    </span>
                    <span class="input">
                        <asp:TextBox ID="txtDate" runat="server" Width="100" Text='<%# Date.ToShortDateString() %>'></asp:TextBox>
                    </span>
                </span>
            </span>
            <span class="buttons">
                <asp:Button Text="Save" ID="btnSave" runat="server" OnClick="btnSave_Click" />
                <a href="UserHome.aspx">Return to Home Page</a> </span>
        </span>
    </span>
    <iframe id="listFrame" width="800" height="400" frameborder="0" scrolling="no" src='<%# "IntakeHistoryFrame.aspx?date="+ HttpUtility.UrlEncode(DateTime.Now.ToString("d"))  %>'></iframe> 
    </form>
    <script language="javascript" type="text/javascript">
        function ReceiveServerData() { /* do nothing */ }

        $(document).ready(function() {

            var validator = $("form").validate({
                rules: {
                    txtFoodName: {
                        required: true,
                        remote: 'FoodExists.ashx'
                    },
                    txtAmount: {
                        required: true,
                        number: true
                    },
                    txtDate: {
                        required: true,
                        ukDate: true
                    }
                },
                messages: {
                    txtFoodName: {
                        remote: 'Select a value from the autocomplete list. Unknown foods are not acceptable.',
                        required: 'Please specify a food.'
                    }
                },
                errorPlacement: function(error, element) {
                    if (element.hasClass('hasDatepicker'))
                        error.insertAfter(element.next());
                    else {
                        var info = element.parent().parent().children('.info');
                        if (info.hasClass('info'))
                            error.insertAfter(info);
                        else
                            error.insertAfter(element);
                    }
                }
            });

            $("#<%# txtFoodName.ClientID %>").autocomplete('FoodNameAutoComplete.ashx', {
                cacheLength: 1,
                max: 20,
                formatItem: function(item) {
                    var data = eval("(" + item[0] + ")");
                    return data.match;
                },
                formatResult: function(item) {
                    var data = eval("(" + item[0] + ")");
                    return data.name;
                }
            });

            $("#<%# txtFoodName.ClientID %>").result(function(event, data, formatted) {
                validator.element($("#<%# txtFoodName.ClientID %>"));
            });

            $("#<%# txtDate.ClientID %>").datepicker({
                showOn: 'both',
                buttonText: 'Select date',
                buttonImageOnly: true,
                buttonImage: 'images/datePicker.gif',
                onSelect: function(dateText, inst) {
                    $('#listFrame')[0].src = "IntakeHistoryFrame.aspx" + "?date=" + escape(dateText);
                }
            });

        });
    </script>
</body>
</html>
